<template>
  <div>
    <div v-show="xianshi" v-if="xianshi">
      <!-- 搜索框 -->
      <van-search v-model="value" show-action placeholder="520礼包抢先领" @search="onSearch" @cancel="onCancel" v-focus
        @input="ssssdata" />
      <!-- 历史记录和热门搜索 组件 -->
      <HistoryHot :searchHistoryData="searchHistoryData" :searchHotData="searchHotData" @goSearch="setValue">
      </HistoryHot>
    </div>
    <!-- 搜索框 -->
    <div v-else>
      <van-search v-model="value" show-action placeholder="520礼包抢先领" @search="onSearch" @cancel="onCancel"
        @input="qing" />
      <p v-for="item in searchHotData" :key="item.id" v-show="xxxx" @click="dssy(item.keyword)">
        {{ item.keyword }}
      </p>
      <van-dropdown-menu v-show="xxx">
        <van-dropdown-item v-model="value1" :options="option1" :disabled="true" />
        <van-dropdown-item v-model="value2" :options="option2" title="价格" @change="jiabian(value2)" />
        <van-dropdown-item v-model="value3" :options="filterCategory" title="分类" @change="leibian(value3)" />
      </van-dropdown-menu>
      <div v-if="goodsList.length > 0" v-show="xxx">
        <ul>
          <li v-for="item in goodsList" :key="item.id" @click="xiang(item.id)">
            <img :src="item.list_pic_url" alt="" />
            <p>{{ item.name }}</p>
            <p>{{ item.retail_price }}</p>
          </li>
        </ul>
      </div>
      <searchch :searchTipsArr="searchTipsArr" v-else></searchch>
      <!-- 搜索列表提示框  :goodsList="goodsList" -->
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Search } from "vant";
// import { Toast } from "vant";
import { sskdata } from "@/api/sskdata";
import { searchhelper } from "@/api/searchhelper";
import { goodslist } from "@/api/goodslist";
import searchch from "@/components/searchch.vue";
import HistoryHot from "@/components/delre.vue";

import { DropdownMenu, DropdownItem } from "vant";

Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Search);
export default {
  name: "",
  data() {
    return {
      xxxx: false,
      xxx: true,
      value1: 0,
      value2: "desc",

      option1: [
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      option2: [
        // { text: "价格", value: "a" },
        { text: "价格由低到高", value: "asc" },
        { text: "价格由高到低", value: "desc" },
      ],

      value: "",
      xianshi: true,
      searchHistoryData: [], // 历史记录列表
      searchHotData: [], // 热门搜索列表
      searchTipsArr: [], //搜索提示列表(输入框输入时)
      order: "desc", // desc 价格由高到底，asc 价格由低到底高
      categoryId: 0, // 类别id，代表下拉菜单中的全部、居家等选项
      sort: "id", // 可以是id或price
      goodsList: [], //  搜索出来的商品列表
      filterCategory: [], //下拉菜单分类数组
    };
  },
  created() {
    sskdata().then((res) => {
      console.log(11, res);
      // this.placeholderVal = res.data.defaultKeyword.keyword; // 搜索框 placeholder 提示词
      this.searchHistoryData = res.data.historyKeywordList; // 历史记录列表
      this.searchHotData = res.data.hotKeywordList; // 热门搜索列表
    });
  },
  components: {
    HistoryHot,
    searchch,
  },
  computed: {
    value3: {
      get() {
        let val = "";
        this.filterCategory.map((item) => {
          if (item.checked) {
            val = item.value;
          }
        });
        return val;
      },
      set(val) {
        console.log(val);
      },
    },
  },
  methods: {
    xiang(id) {
      console.log(id);
      this.$router.push({
        name: "xiang",
        query: { id },
      });
    },
    leibian(v3) {
      this.categoryId = v3;
      this.sort = "id";
      this.onSearch();
    },
    jiabian(j) {
      this.order = j;
      this.sort = "price";
      this.onSearch();
    },
    // 搜索框
    dssy(ss) {
      this.value = ss;
      this.onSearch();
      this.xxxx = false;
      this.xxx = true;
    },
    setValue(m) {
      console.log(m);
      this.value = m;
      this.onSearch();
      // this.dssy();
      this.ssssdata();
    },
    ssssdata(value) {
      // 搜索提示数据请求
      searchhelper({ keyword: value }).then((res) => {
        console.log(33, res);
        this.searchTipsArr = res.data;
      });
    },
    qing() {
      if (this.value == "") {
        this.xxxx = true;
        this.xxx = false;
      } else {
        this.xxxx = false;
      }
    },
    onSearch() {
      // Toast(value);
      //隐藏模态框
      // this.$router.push("/searchc");
      this.xianshi = false;
      goodslist({
        keyword: this.value,
        page: 1,
        size: 20,
        order: this.order, //价格排序
        categoryId: this.categoryId, //分类排序id
        sort: this.sort, //分类拍戏
        // price,
      }).then((res) => {
        console.log(44, res);
        this.goodsList = res.data.goodsList; // 搜索出来的商品列表
        let cate = res.data.filterCategory; // 下拉菜单分类数组（全部，居家，。。。）
        cate = JSON.parse(
          JSON.stringify(cate).replace(/id/g, "value").replace(/name/g, "text")
        );
        this.filterCategory = cate;
      });
    },
    onCancel() {
      // Toast("取消");
      this.xianshi = false;
      // setTimeout(function () {

      // }, 1000);
      // 返回上一页
      this.$router.go("-1");
    },
  },
  // 定义局部指令简写
  directives: {
    focus(el) {
      el.focus();
    },
  },
};
</script>
<style lang="less" scoped>
ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  li {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
      width: 100%;
      height: 100%;
      // float: left;
    }
  }
}
</style>




